<!DOCTYPE html>
<html lang="zh-CN">

<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title>Document</title>

	<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>

	<!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
	<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u"
	 crossorigin="anonymous">
	<!-- 可选的 Bootstrap 主题文件（一般不用引入） -->
	<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp"
	 crossorigin="anonymous">
	<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
	<script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa"
	 crossorigin="anonymous">
	</script>

	<link rel="stylesheet" href="./layui/css/layui.css">

	<link rel="stylesheet" href="./layer/layer.js">

	<style type="text/css">
		.left-nav ul li {
			text-align: left;
			line-height: 40px;
			width: 100%;
			height: 40px;
		}

		.left-nav ul li:hover {
			background-color: aquamarine;
			border-right: 2px green solid;
		}

		.left-nav ul li a {
			height: 100%;
			width: 100%;
		}

		.left-nav ul ul li {
			text-align: left;
			line-height: 40px;
			width: 100%;
			height: 40px;
			padding-left: 10px;
		}

		.left-nav ul ul ul li {
			text-align: left;
			line-height: 40px;
			width: 100%;
			height: 40px;
			padding-left: 20px;
		}

		.left-nav ul li a span {
			padding: 0 5px;
		}
	</style>
</head>

<body class="layui-layout-body" style="background-color: #eee;">
	<div class="layui-layout layui-layout-admin">
		<div class="layui-header">
			<div class="layui-logo">一体化教学管理平台</div>
			<!-- 头部区域（可配合layui已有的水平导航） -->
			<ul class="layui-nav layui-layout-left">
				<li class="layui-nav-item">
					<a href="">首页</a>
				</li>
				<li class="layui-nav-item">
					<a href="">我的面板</a>
				</li>
				<li class="layui-nav-item">
					<a href="">课程管理</a>
				</li>

			</ul>
			<ul class="layui-nav layui-layout-right">
				<li class="layui-nav-item">
					<a href="#">
						<span class="glyphicon glyphicon-bell" aria-hidden="true">
							<span class="layui-badge-dot"></span>
						</span>
					</a>
					<div class="layui-nav-child" style="margin-left:-100px">
							<div class="layui-tab layui-tab-brief" lay-filter="docDemoTabBrief">
									<ul class="layui-tab-title">
										<li class="layui-this">最新公告</li>
										<li>历史消息</li>

									</ul>
									<div class="layui-tab-content" style="height: 100px;">
										<div class="layui-tab-item layui-show">内容不一样是要有，因为你可以监听tab事件（阅读下文档就是了）</div>
										<div class="layui-tab-item">内容2</div>

									</div>
								</div> 
					</div>
				</li>
				<li class="layui-nav-item">
					<a href="javascript:;">
						<img src="http://t.cn/RCzsdCq" class="layui-nav-img"> 许舒隆，开课人
					</a>
					<dl class="layui-nav-child">
						<dd>
							<a href="#">基本资料</a>
						</dd>
						<dd>
							<a href="#">安全设置</a>
						</dd>
					</dl>
				</li>
			</ul>
		</div>

		<div style="top: 60px;
    bottom: 44px;
    position: absolute;
    padding:0;
    z-index: 998;
    width: 100%;
    overflow: hidden;
    overflow-y: hidden;
    overflow-y: auto;
    box-sizing: border-box;
    min-width:500px">

			<div style="width:1240px;margin:0 auto;height:100%;overflow: hidden;
		    overflow-y: hidden;
		    overflow-y: auto;
		    box-sizing: border-box;">

				<!-- 面包屑 -->
				<div style="margin-top: 20px;">

					<span class="layui-breadcrumb">
						<i class="layui-icon" style="margin-right: 5px;">&#xe68e;</i>
						<a href="">一体化教学平台</a>
						<a href="">本地</a>
						<a href="">某某班级</a>
						<a>
							<cite>正文</cite>
						</a>
					</span>
				</div>
				<div style="
        background-color:#fff;
        margin-top:15px;
        padding:20px;
        min-height:750px;
      ">
					<!-- 内容主体区域 -->
					<div class="row">
						<div class="col-lg-2">
							<!-- 左侧导航栏区域 -->
							<div class="left-nav" style="height:100%;width:100%;border-right: 1px solid #eee;">
								<ul id="accordion">
									<li>
										<a href="GroupingQuestion.html" target="myFrameName">
											<span class="glyphicon glyphicon-user" aria-hidden="true"></span>我的课程面板</a>
									</li>
									<li>
										<a data-toggle="collapse" data-parent="#accordion" href="#collapse1">
											<span class="glyphicon glyphicon-user" aria-hidden="true"></span>课程基本信息</a>
									</li>
									<ul id="collapse1" class="collapse">
										<li>
											<a href="JobCompletion.html" target="myFrameName">
												<span></span>作业完成情况</a>
										</li>
										<li>
											<a href="JobManagement.html" target="myFrameName">
												<span></span>作业管理</a>
										</li>
									</ul>
									</li>
									<li>
										<a href="#">
											<span class="glyphicon glyphicon-user" aria-hidden="true"></span>任课老师</a>
									</li>
									<li>
										<a data-toggle="collapse" data-parent="#accordion" href="#collapse2">
											<span class="glyphicon glyphicon-user" aria-hidden="true"></span>学员管理</a>
									</li>
									<ul id="collapse2" class="collapse">
										<li>
											<a href="StudentInformation.html" target="myFrameName">
												<span></span>学员信息管理</a>
										</li>
										<li>
											<a data-toggle="collapse" data-parent="#accordion" href="#collapse3">
												<span></span>学员分组管理</a>
										</li>
										<ul id="collapse3" class="collapse">
											<li>
												<a href="GroupingQuestion.html" target="myFrameName">
													<span></span>分组测试题管理</a>
											</li>
											<li>
												<a href="#">
													<span></span>分组测试考试结果</a>
											</li>
											<li>
												<a href="#">
													<span></span>学员智能分组</a>
											</li>
										</ul>
									</ul>

									<li>
										<a data-toggle="collapse" data-parent="#accordion" href="#collapse4">
											<span class="glyphicon glyphicon-user" aria-hidden="true"></span>签到管理</a>
									</li>
									<ul id="collapse4" class="collapse">
										<li>
											<a href="#">
												<span></span>不知道里面是啥</a>
										</li>
									</ul>

									<li>
										<a href="#">
											<span class="glyphicon glyphicon-user" aria-hidden="true"></span>授课计划管理</a>
									</li>
									<li>
										<a href="#">
											<span class="glyphicon glyphicon-user" aria-hidden="true"></span>评审管理</a>
									</li>
									<li>
										<a data-toggle="collapse" data-parent="#accordion" href="#collapse5">
											<span class="glyphicon glyphicon-user" aria-hidden="true"></span>成绩管理</a>
									</li>
									<ul id="collapse5" class="collapse">
										<li>
											<a href="#">
												<span></span>奖惩分管理</a>
										</li>
										<li>
											<a href="#">
												<span></span>学员成绩比例</a>
										</li>
										<li>
											<a href="#">
												<span></span>学员成绩报告</a>
										</li>
										<li>
											<a href="#">
												<span></span>团队总成绩排名</a>
										</li>
										<li>
											<a href="PersonalRank.html" target="myFrameName">
												<span></span>个人总成绩</a>
										</li>
									</ul>

								</ul>

								<button id="demo1" data-method="offset" data-type="auto" class="layui-btn layui-btn-normal">居中弹出</button>
							</div>
						</div>
						<div class="col-lg-10">

							<iframe id="content" name="myFrameName" height=600 frameborder=0 border=0 src="" scrolling=auto style="width:100%;"></iframe>

							<!-- <button class="layui-btn">查询</button>
								<button class="layui-btn layui-btn-primary">重置</button>
								<button class="layui-btn layui-btn-sm">
              <i class="layui-icon"></i>新增</button>
								<button class="layui-btn layui-btn-primary layui-btn-sm">复制课程</button>
								<button class="layui-btn layui-btn-sm">上传附件</button>
								<button class="layui-btn layui-btn-normal">保存</button>
								<button class="layui-btn layui-btn-primary">返回</button> -->
						</div>

					</div>
				</div>
			</div>
		</div>

		<div style="
				position: fixed;
				left: 0px;
				right: 0;
				bottom: 0;
				height: 44px;
				line-height: 44px;
				padding: 0 15px;
				background-color: #eee;
				text-align:center;
				">
			<!-- 底部固定区域 -->
			厦门理工学院 &copy; 2017
		</div>
	</div>

</body>

<script src="./layui/layui.js"></script>
<script>
	//JavaScript代码区域
	layui.use('element', function () {
		var element = layui.element;
	});

</script>
<script>
	layui.use('layer', function () {
		var layer = layui.layer;
		$('#demo1').on('click', function () {
			layer.open({
				type: 1,
				title: false,
				closeBtn: 0,
				shadeClose: true,
				skin: 'yourclass',
				content: '<h1>123</h1>'
			});
		});


	});  
</script>

</html>